<template>
  <div>
    <sticky :z-index="10" class-name="sub-navbar">
      <el-dropdown trigger="click" style="height: 100%;">
        <div class="button-c">
          <el-button>
            Platform
            <el-icon class="el-icon--right">
              <caret-bottom />
            </el-icon>
          </el-button>
        </div>

        <template #dropdown>
          <el-dropdown-menu class="no-border">
            <el-dropdown-item>
              <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
                <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-dropdown trigger="click" style="height: 100%;" :hide-on-click="false">
        <div class="button-c">
          <el-button>
            Link
            <el-icon class="el-icon--right">
              <caret-bottom />
            </el-icon>
          </el-button>
        </div>
        <template #dropdown>
          <el-dropdown-menu class="no-padding no-border" style="width:300px">
            <el-dropdown-item>
              <el-input v-model="url" type="text" placeholder="Please enter the content">
                <template #prepend>
                  Url
                </template>
              </el-input>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <div class="time-container">
        <el-date-picker v-model="time" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="Release time" />
      </div>

      <el-button style="margin-left: 10px;" type="success">
        publish
      </el-button>
    </sticky>

    <div class="components-container">
      <aside>
        Sticky header, When the page is scrolled to the preset position will be sticky on the top.
      </aside>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <sticky :sticky-top="200">
        <el-button type="primary"> placeholder</el-button>
      </sticky>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StickyDemo'
}
</script>

<script setup>
import { ref, reactive, watch } from 'vue'
import {
  CaretBottom
} from '@element-plus/icons-vue'

import Sticky from '@/components/Sticky'

const time = ref('')
const url = ref('')
const platforms = ref(['a-platform'])
const platformsOptions = ref([
  { key: 'a-platform', name: 'platformA' },
  { key: 'b-platform', name: 'platformB' },
  { key: 'c-platform', name: 'platformC' }
])
/* eslint-disable no-unused-vars */
const pickerOptions = reactive({
  disabledDate(time) {
    return time.value.getTime() > Date.now()
  }
})

watch(url, val => {
  console.log(val)
})

</script>

<style scoped>
.components-container div {
  margin: 10px;
}

.time-container {
  display: inline-block;
}

.button-c {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
